<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>
<body>
    <h3>闭包编程</h3>

    <script>
        // 闭包： 封闭的环境（一个函数有权访问另一个函数作用域的变量）
        // 编码1:
        function outerFunc1(){
            var index = 0;
            function innerFunc(){
                index ++;
            }
            innerFunc();
            innerFunc();
            innerFunc();
        }
        // 编码2:
        function outerFunc2(){
            var index = 0;
            function innerFunc(){
                index ++;
                console.log(index);
            }
            return innerFunc;
        }
        // 调用 f1 实际上就是调用 innerFunc 函数
        var f2 =  outerFunc2();
        f2()

        // 编码3：
        function outerFunc3(){
            var index = 0;
            return function(){
                index ++;
                console.log("这是闭包环境中的: ",index);
            }
        }
        // 调用 f2 实际上就是调用 返回值函数
        var f3 =  outerFunc3();
        f3();
        f3();


        // 编码4：
        function outerFunc4(){
            var index = 0;
            return {
                foo: function(){
                    index ++;
                    console.log("这是闭包环境中foo的: ",index);
                }
            }
        }

       var obj =  outerFunc4()
       console.log(obj);
       obj.foo(); // 控制台输出1
       obj.foo(); // 控制台输出2
       obj.foo(); // 控制台输出3


    </script>
</body>
</html>